/*
 * @Description: 银行卡组件
 * @Author: tao.xie
 * @Date: 2019-03-20 16:58:24
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-03-25 14:56:09
 */
<template>
  <div class="flex-h flex-hc flex-vc bank-card-wrapper">
    <div class="flex-v flex-hs bank-card-content-wrapper">
      <span>{{this.$props.data.cardNameDesc}}</span>
      <!-- <span>{{this.$props.data.bankCardNo}}</span> -->
      <span v-html="bankCardNo"></span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => { return {} },
      required: true
    }
  },
  data() {
    return {
      cardNoSplitNum: 4
    }
  },
  computed: {
    bankCardNo() {
      if (!this.data.bankCardNo) {
        return ''
      }
      let numStr = (this.data.bankCardNo || '').toString()
      let result = ''
      while (numStr.length > this.cardNoSplitNum) {
        result += numStr.substr(0, this.cardNoSplitNum) + '&nbsp;&nbsp;'
        numStr = numStr.substr(this.cardNoSplitNum)
      }
      if (numStr) {
        result += numStr
      }
      return result
    }
  }
}
</script>

<style>
/* 银行卡包裹层 */
.bank-card-wrapper {
  background: #fff;
  width: 750px;
  height: 200px;
  margin-bottom: 35px;
}
/*银行卡内容包裹层*/
.bank-card-content-wrapper {
  width: 690px;
  height: 200px;
  background: linear-gradient(
    90deg,
    rgba(42, 181, 251, 1) 0%,
    rgba(62, 158, 245, 1) 100%
  );
  box-shadow: 0px 1px 1px 0px rgba(219, 218, 218, 0.5);
  border-radius: 10px;
  color: #fff;
}

/*银行卡内部元素*/
.bank-card-content-wrapper > * {
  margin-left: 40px;
}

/*银行名称*/
.bank-card-content-wrapper span:first-of-type {
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  margin-top: 30px;
}
/* 银行卡号 */
.bank-card-content-wrapper span:nth-of-type(2) {
  font-size: 20px; /*no*/
  line-height: 28px; /*no*/
  margin-top: 38px;
  letter-spacing: 10px;
}
</style>
